<template>
  <div id="train-orders">
    <div class="card mb-0 bg-transparent">
      <div class="card-header bg-info text-white">火车票订单</div>
      <div class="card-body mb-0">
        <form>
          <div class="row">
            <div class="col-1">
              <my-date-picker
                id="beginDate"
                v-model="beginDate"
                name="sc.beginDate"
                placeholder="开始日期"
              ></my-date-picker>
            </div>
            <div class="col-1">
              <my-date-picker
                id="endDate"
                v-model="endDate"
                name="sc.endDate"
                placeholder="截止日期"
              ></my-date-picker>
            </div>
            <div class="col-1">
              <input
                type="textfield"
                class="form-control"
                size="6"
                placeholder="订单号"
                v-model.trim="orderNo"
              />
            </div>
            <div class="col-2 px-0 ms-1" style="max-width: 150px">
              <my-select-customer
                :status="1"
                :customerId.sync="customerId"
                :enterpriseType="1"
              ></my-select-customer>
            </div>
            <div class="col-1">
              <input
                type="textfield"
                class="form-control ms-1"
                size="6"
                placeholder="乘客"
                v-model.trim="name"
              />
            </div>
            <div class="col-1">
              <my-date-picker
                id="ddate0"
                v-model="ddate"
                placeholder="出发日期"
              ></my-date-picker>
            </div>
            <div class="col-1">
              <select
                class="form-select"
                v-model.number="status"
                name="sc.status"
              >
                <option value="-1">状态</option>
                <option value="0">待处理</option>
                <option value="1">处理中</option>
                <option value="2">已完成</option>
                <option value="4">已取消</option>
              </select>
            </div>
            <div class="col-1">
              <select class="form-select" v-model.number="sc.pageSize">
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
              </select>
            </div>
            <div class="col">
              <button
                type="button"
                class="btn btn-primary"
                @click.stop="search()"
              >
                查找
              </button>
              <button
                type="button"
                class="btn btn-secondary ms-2"
                @click.stop="reset()"
              >
                重置
              </button>

              <button
                type="button"
                class="btn btn-primary ms-5"
                @click.stop="importExcel()"
              >
                导入Excel
              </button>
              <a href="/public/template/火车票导入模板.xls" class="ms-1"
                >Excel模板</a
              >
              <router-link to="/train/order" class="btn btn-success float-end"
                >新建</router-link
              >
            </div>
          </div>
        </form>
      </div>
    </div>
    <nav id="pagination-box" class="float-end">
      <my-pagination
        name="pagination"
        :row-count="sc.rowCount"
        :page-total="sc.pageTotal"
        :page-no="sc.pageNo"
        @next-page="nextPage"
        @prev-page="prevPage"
        @direct-page="directPage"
      ></my-pagination>
    </nav>

    <table class="table table-striped table-sm">
      <thead>
        <tr>
          <th>订单号</th>
          <th>公司</th>
          <th>乘客</th>
          <th>车次</th>
          <th>出发日期</th>
          <th>出发</th>
          <th>到达</th>
          <th>等级</th>
          <th>价格</th>
          <th>成本</th>
          <th>服务费</th>
          <th>预订员</th>
          <th>外部订单号</th>
          <th>生成时间</th>
          <th>状态</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <template v-for="info in dataList">
          <tr>
            <td>{{ info.orderNo }}</td>
            <td>{{ info.customerName }}</td>
            <td>{{ getShortName(info.passengerName, 20) }}</td>
            <td>{{ info.trainNo }}</td>
            <td>{{ info.ddate }}</td>
            <td>{{ info.dcity }}</td>
            <td>{{ info.acity }}</td>
            <td>{{ info.seatClass }}</td>
            <td>{{ info.price }}</td>
            <td>{{ info.cost }}</td>
            <td>{{ info.serviceCharge }}</td>
            <td>{{ info.operator }}</td>
            <td>{{ info.externalOrderNo }}</td>
            <td>{{ info.createTime }}</td>
            <td>
              {{ getStatusDesc(info.status) }}
              <span class="text-primary small" v-if="info.payStatus === 2"
                >已销</span
              >
            </td>
            <td>
              <router-link :to="`/train/order/` + info.id">详情</router-link>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
    <nav id="pagination-box" class="float-end">
      <my-pagination
        name="pagination"
        :row-count="sc.rowCount"
        :page-total="sc.pageTotal"
        :page-no="sc.pageNo"
        @next-page="nextPage"
        @prev-page="prevPage"
        @direct-page="directPage"
      ></my-pagination>
    </nav>

    <modal-excel-upload ref="modalUploadExcel">
      用Excel导入火车票订单
      <template v-slot:excelFormatDesc
        >Excel格式说明: 票号，销售日期(可空)</template
      >
    </modal-excel-upload>
  </div>
</template>

<script>
import $ from "jquery";
import {
  searchTrainOrders,
  showTrainOrderStatus,
  uploadTrainOrders,
} from "@/api/train.js";
import MyDatePicker from "@/components/my-datepicker.vue";
import MyPagination from "@/components/my-pagination.vue";

import MySelectCustomer from "@/components/my-select2-customer.vue";
import ModalExcelUpload from "@/components/modal/my-modal-excel-upload-train-orders.vue";

export default {
  components: {
    MyDatePicker,
    MyPagination,
    MySelectCustomer,
    ModalExcelUpload,
  },
  data() {
    return {
      dataList: [],
      sc: {
        rowCount: 0,
        pageNo: 1,
        pageSize: 25,
        pageTotal: 0,
      },
      beginDate: "",
      endDate: "",
      orderNo: "",
      ddate: "",
      name: "",
      customerId: -1,
      user: {
        id: 0,
      },

      status: -1,
    };
  },
  mounted: function () {
    if (window.matchMedia("(max-width: 576px)").matches) {
      this.$router.replace("/h5/train/orders");
    } else {
      this.search();
    }
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showLoading: function (loadingText) {
      this.$store.commit("showLoading", {
        loading: true,
        loadingText: loadingText,
      });
    },
    hideLoading: function () {
      this.$store.commit("showLoading", {
        loading: false,
      });
    },
    search: function () {
      this.showLoading();

      const params = {
        "sc.pageNo": this.sc.pageNo,
        "sc.pageSize": this.sc.pageSize,
        "sc.beginDate": this.beginDate,
        "sc.orderNo": this.orderNo,
        "sc.endDate": this.endDate,
        "sc.name": this.name,
        "sc.departureDate": this.ddate,
        customerId: this.customerId,
        "sc.status": this.status,
      };

      searchTrainOrders(
        params,
        (v) => {
          this.dataList = v.dataList;
          this.sc = v.page;
        },
        () => {
          this.hideLoading();
        }
      );
    },
    importExcel: function () {
      this.$refs.modalUploadExcel
        .modal()
        .then((formData) => {
          this.showLoading("处理中......");
          uploadTrainOrders(
            formData.data,
            (v) => {
              if (v.status === "OK") {
                this.showErrMsg("操作成功");
              } else {
                this.showErrMsg("操作失败:" + v.errmsg, "danger");
              }
            },
            () => {
              this.hideLoading();
            }
          );
        })
        .catch((ex) => {});
    },
    getStatusDesc: function (status) {
      return showTrainOrderStatus(status);
    },
    reset: function () {
      this.customerId = -1;
      this.ddate = "";
      this.name = "";
      this.sc.pageNo = 1;
      this.beginDate = "";
      this.endDate = "";
      this.orderNo = "";
      this.status = -1;
    },
    getShortName: function (val, max) {
      if (val === null || val.length <= max) {
        return val;
      } else {
        return val.substring(0, max) + " ......";
      }
    },
    prevPage: function () {
      this.sc.pageNo = this.sc.pageNo - 1;
      if (this.sc.pageNo < 1) this.sc.pageNo = 1;
      this.search();
    },
    nextPage: function () {
      this.sc.pageNo = this.sc.pageNo + 1;
      this.search();
    },
    directPage: function (pageNo) {
      this.sc.pageNo = pageNo;
      this.search();
    },
  },
};
</script>
